<template>
	<view>
		<view class='wrapper'>
			<view class='item borRadius14'>
				<view class="order_no">订单号：{{ orderNo }}</view>
				<view class="title">￥<text>{{payPrice}}</text></view>
				<view class='list'>
					<view class="oneline">
						<view class="leftBox">
							<image src="../../static/weichat.png"
								style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"></image>
							微信支付
						</view>
						<view>
							<uni-icons type="circle-filled" size="20" color="#97e497"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class='Bnt' @tap='getOrderPay'>确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payPrice: '',
				orderNo: '',
				payType: '', //支付方式
				orderId: '',
			}
		},
		onLoad(options) {
			this.payPrice = options.payPrice;
			this.orderNo = options.orderNo;
			this.orderId = options.orderId
		},

		methods: {
			onPay(info) {
				console.log(info,'支付参数');
				uni.requestPayment({
					provider: 'wxpay', // 服务提提供商
					timeStamp: info.timeStamp, // 时间戳
					nonceStr: info.nonceStr, // 随机字符串
					package: info.packages,
					signType: info.signType, // 签名算法
					paySign: info.paySign, // 签名
					success: (res)=> {
						console.log('支付成功', res);
						uni.showToast({
							title: '支付成功',
							complete: () => {
								setTimeout(v => {
									uni.navigateBack()
								},2500)
							}
						})
					},
					fail: (err)=> {
						console.log('支付失败', err);
						uni.showToast({
							title: '支付失败',
							icon: 'error',
							complete: () => {
								setTimeout(v => {
									uni.navigateBack()
								},2500)
							}
						})
					}
				});
			},
			async getOrderPay() {
				const res = await this.$api.post('pay/payment', {
					orderNo: this.orderNo,
					payType: 'weixin',
					uni: this.orderId,
					payChannel: 'routine'
				});
				if (res.code == 200) {
					// console.log(res, "res---")
					this.onPay(res.data.jsConfig)
				} else {
					this.showToast(res.message)
				}
			},

		},
	}
</script>



<style lang="scss" scoped>
	.oneline {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-top: 1px solid #f7f7f7;
		border-bottom: 1px solid #f7f7f7;
	}

	.big {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #a2d0a2;
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
	}

	.mini {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background: #97e497;
	}

	.leftBox {
		display: flex;
		align-items: center;
	}

	.order_no {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin-top: 100rpx;
		margin-bottom: 30rpx;
	}

	.titleNo {
		width: 100%;
		font-size: 28rpx;
		text-align: center;
	}

	.btn-box {
		padding: 0 30rpx;
		position: fixed;
		bottom: 43rpx;
		display: flex;
		justify-content: center;
	}

	.Bnt {
		border-radius: 30rpx;
		width: 70%;
		background: linear-gradient(90deg, #589AFF, #3DD8FF);
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
	}

	.wrapper {

		padding: 30rpx;

		.list {
			margin-top: 50rpx;
		}

		.item {
			padding: 50rpx 0;
			font-size: 30rpx;
			color: #333333;
			background-color: #fff;

			.title {
				text-align: center;
				font-size: 34rpx;

				text {
					font-weight: 800;
					font-size: 50rpx;
				}
			}
		}

	}
</style>